<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:include="./commons/common-css.html :: commonHead('Win10风格灌排首页')">
	<meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
	<style>
	* {
		font-family: "Microsoft YaHei", 微软雅黑, "MicrosoftJhengHei", 华文细黑, STHeiti, MingLiu
	}
	.win10-block-content-text {
		line-height: 44px;
		text-align: center;
		font-size: 16px;
	}
    </style>
</head>
<body>
<div id="win10">
    <div class="desktop">
        <div id="win10-shortcuts" class="shortcuts-hidden">
        	<div class="shortcut"  v-for="(data, index) in menus" @click="openUrl(data.src, data.pageIcon, data.name)" style="left: 10px; top: 10px;">
        		<img class="icon" v-bind:src="data.imageSrc"/>
                <div class="title">{{data.name}}</div>
        	</div>
        </div>
        <div id="win10-desktop-scene"></div>
    </div>
    <div id="win10-menu" class="hidden">
        <div class="list win10-menu-hidden animated animated-slideOutLeft">
            <div class="item"
                 onclick="Win10.exit()">
                <i class="black icon fa fa-power-off fa-fw"></i><span class="title">关闭</span>
            </div>
        </div>
        <div class="blocks">
            <div class="menu_group">
                <div class="title">Welcome</div>
                <div class="block" loc="1,1" size="6,4">
                    <div class="content">
                        <div style="font-size:100px;line-height: 132px;margin: 0 auto ;display: block"
                             class="fa fa-fw fa-windows win10-block-content-text"></div>
                        <div class="win10-block-content-text" style="font-size: 22px">欢迎使用 Win10-UI</div>
                    </div>
                </div>
            </div>
        </div>
        <div id="win10-menu-switcher"></div>
    </div>
    <div id="win10_command_center" class="hidden_right">
        <div class="title">
            <h4 style="float: left">消息中心 </h4>
            <span id="win10_btn_command_center_clean_all">全部清除</span>
        </div>
        <div class="msgs"></div>
    </div>
    <div id="win10_task_bar">
        <div id="win10_btn_group_left" class="btn_group">
            <div id="win10_btn_win" class="btn"><span class="fa fa-windows"></span></div>
            <div class="btn" id="win10-btn-browser"><span class="fa fa-internet-explorer"></span></div>
        </div>
        <div id="win10_btn_group_middle" class="btn_group"></div>
        <div id="win10_btn_group_right" class="btn_group">
            <div class="btn" id="win10_btn_time"></div>
            <div class="btn" id="win10_btn_command"><span id="win10-msg-nof" class="fa fa-comment-o"></span></div>
            <div class="btn" id="win10_btn_show_desktop"></div>
        </div>
    </div>
<!-- js引入 -->
<span th:include="./commons/common-js.html :: commonOnLoadJs"></span>
</div>
</body>
<script>
/*<![CDATA[*/
ctxPath = [[@{/}]];
/*]]>*/
 
Win10.onReady(function () {
	//设置壁纸
	Win10.setBgUrl({
		main: ctxPath+'static/win10/images/wallpapers/main.jpg',
		mobile: ctxPath+'static/win10/images/wallpapers/mobile.jpg',
	});
	
	Win10.setAnimated([
		'animated flip',
		'animated bounceIn',
	], 0.01);
});

var app = new Vue({
	el: '#win10',
	data: {
		menus: []
	},
	methods: {
		init: function() {
			this.menus = [{
				id: 1,
				name: '输水工程',
				src: ctxPath+'router/waterdelivery/waterDeliveryIndex',
				pageIcon: ctxPath+'static/win10/images/baseIcon/canalSystem.jpg',
				imageSrc: ctxPath+'static/win10/images/baseIcon/canalSystem.jpg'
			},{
				id: 2,
				name: '配水工程',
				src: ctxPath+'router/waterdistribute/waterDistributeIndex',
				pageIcon: ctxPath+'static/win10/images/baseIcon/waterGate.png',
				imageSrc: ctxPath+'static/win10/images/baseIcon/waterGate.png'
			},{
				id: 3,
				name: '调度地图',
				src: ctxPath+'index/default',
				pageIcon: ctxPath+'static/win10/images/icon/win10.png',
				imageSrc: ctxPath+'static/win10/images/icon/website.png'
			},{
				id: 4,
				name: '基础配置',
				src: ctxPath+'router/baseconfig/baseConfigIndex',
				pageIcon: ctxPath+'static/win10/images/baseIcon/baseConfig.png',
				imageSrc: ctxPath+'static/win10/images/baseIcon/baseConfig.png'
			}/* ,{
				id: 5,
				name: 'QQ聊天',
				src: ctxPath+'router/baseconfig/baseConfigIndex',
				pageIcon: ctxPath+'static/win10/images/baseIcon/qq.jpg',
				imageSrc: ctxPath+'static/win10/images/baseIcon/qq.jpg'
			} */];
		},
		openUrl: function(src, srcIcon, name) {
			Win10.openUrl(src, '<img class="icon" src="'+srcIcon+'"/>'+name);
		}
	},
	mounted: function() {
		this.init();
	}
});
</script>
</html>